<style scoped>
.check-box{
  width: 600px;
}
</style>
<template>
  <div id="content">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="角色ID" prop="role_id">
        <el-select v-model="form.role_id" placeholder="请选择角色ID">
          <el-option v-for="(item,index) in role" :label="item.name" :value="item.id" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <!-- ↓↓ -->
      <el-form-item label="权限ID" prop="permis_ids">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-left:20px;">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="form.perms_ids" @change="handleCheckedCitiesChange" style="margin-left:20px;width:600px;">
          <el-checkbox v-for="(item, index) in perms" :label="item.id" :key="index">{{item.name}}</el-checkbox>
        </el-checkbox-group>
        <el-pagination
        style="margin-bottom:50px;"
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :page-size="15"
        :total="total">
      </el-pagination>
    </el-form-item>
      <!-- ↑↑ -->
      <el-form-item style="margin-top:20px;">
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    name: 'role-sync',
    data () {
      return {
        total: 0,
        checkAll: false,
        isIndeterminate: false,
        form: {
          role_id: '',
          perms_ids: []
        },
        perms: [],
        // 多选，选中的id
        checkIds: [],
        role: [],
        rules: {
          role_id: [
            { required: true, message: '此项为必填' }
          ],
          perms_ids: [
            { required: true, message: '此项为必填' }
          ]
        }
      }
    },
    methods: {
      handleCheckAllChange (val) {
        this.form.perms_ids = val ? this.checkIds : []
        this.isIndeterminate = false
      },
      handleCheckedCitiesChange (value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.checkIds.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkIds.length
      },
      handleCurrentChange (val) {
        APP.ajax('permission/list?page=' + val, {}, res => {
          this.perms = res.data.data.data
          for (let i = 0; i < this.perms.length; i++) {
            this.checkIds.push(this.perms[i].id)
          }
        })
      },
      onSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {
              perms_ids: this.form.perms_ids,
              role_id: this.form.role_id
            }
            APP.ajax('post@role/sync', params, res => {
              if (res.data.status === 200) {
                this.$message.success('创建成功!')
                this.resetForm(formName)
                this.checkAll = false
                this.form.perms_ids = []
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
    },
    mounted () {
      APP.ajax('permission/list', {}, res => {
        this.perms = res.data.data.data
        this.total = res.data.data.total
        for (let i = 0; i < this.perms.length; i++) {
          this.checkIds.push(this.perms[i].id)
        }
      })
      APP.ajax('role/list', {}, res => {
        this.role = res.data.data.data;
      })
    }
  }
</script>
